<template>
  <ul class="schema-tree">
    <span>
      <!-- <i class="schema-tree-icon dimension-icon"></i> -->
      <b>维度列(Dimension)</b>
    </span>
    <li>

    <draggable v-model="value" :options="options" element="ul">
      <!-- <li v-for="(element,index) in value" class="bullet_blue_li">
        <span style="margin-right: 3px;">
          <img src="../../const/cboard/bullet_blue.png" style="vertical-align: middle;">
        </span>
        <span>{{element.column}}</span>
      </li> -->
      <li v-for="(item, index) in value" :key="item.id" :class="{'moveable': !item.columns}">
        <span>
          <i v-if="item.columns" class="fa fa-caret-down"></i>
          <i v-if="item.columns" class="schema-tree-icon hierarchy-icon"></i>
          <i v-else class="schema-tree-icon blue-icon"></i>
          {{ item.alias || item.column }}
        </span>

        <draggable v-if="item.columns" v-model="item.columns" :options="options" element="ul">
          <li v-for="(col, index) in item.columns" :key="col.id" class="moveable">
            <span>
              <i class="schema-tree-icon blue-icon"></i>
              {{ col.alias || col.column }}
            </span>
          </li>
        </draggable>
      </li>
    </draggable>
    </li>
  </ul>

</template>

<script>
  export default {
    name: 'DimensionTree',
    props: {
      treeData: {
        type: Array,
        required: true,
        default () {
          return [];
        }
      },
      options: {
        type: Object,
        default () {
          return {};
        }
      }
    },
    components: {
      draggable: () => import('vuedraggable')
    },
    watch: {
      value(value) {
        this.$emit('input', value);
      },
      treeData() {
        this.value = this.treeData;
      }
    },
    created() {
      console.log(11111111, this.treeData)
      this.value = this.treeData;
    },
    data() {
      return {
        value: []
      }
    },
    methods: {
      del(index, arr) {
        arr.splice(index, 1);
      }
    }
  }
</script>

<style scoped>
  .schema-tree {
    overflow: hidden;
  }

  .schema-tree li {
    position: relative;
    list-style-type: none;
    margin: 0;
    white-space: nowrap;
    padding-left: 15px;
  }

  .schema-tree li:before,
  .schema-tree li:after {
    content: '';
    position: absolute;
  }

  .schema-tree li:before {
    top: 0;
    left: -5px;
    height: 100%;
    width: 1px;
    border-left: 1px dotted black;
  }

  .schema-tree li:after {
    top: 9px;
    left: -5px;
    height: 100%;
    width: 15px;
    border-top: 1px dotted black;
  }

  .schema-tree li:last-child:before {
    height: 11px;
  }

  .moveable {
    cursor: move;
  }

  .schema-tree-icon {
    display: inline-block;
    vertical-align: middle;
    width: 15px;
    height: 15px;
  }

  /* .dimension-icon {
  background: url(../../assets/imgs/schema/dimension.gif);
}
.hierarchy-icon {
  background: url(../../assets/imgs/schema/hierarchy.gif);
} */
.blue-icon {
  background: url(../../const/cboard/bullet_blue.png);
}

  .fa-trash-o {
    cursor: pointer;
  }
</style>
